<template>
  <div id="train-refund-order-detail" class="mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/h5/train/refund/orders">火车票退票</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <div class="card">
        <div class="card-body">
          <dl class="row">
            <dt class="col-4 text-end">订单号</dt>
            <dd class="col-8">{{ detail.orderNo }}</dd>
            <dt class="col-4 text-end">客户</dt>
            <dd class="col-8">
              {{ detail.customerName }}
              <span class="text-danger small">{{ detail.customerCode }}</span>
            </dd>
          </dl>
        </div>

        <div class="card-body bg-info text-white py-0">车次信息</div>
        <table class="table table-striped table-hover table-sm">
          <thead>
            <tr>
              <th>出发</th>
              <th>到达</th>
              <th class="text-center">日期</th>
              <th>车次</th>
              <th>等级</th>
              <th class="d-none d-md-table-cell">票价</th>
              <th class="d-none d-md-table-cell">成本</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                {{ detail.dcity }}
              </td>
              <td>{{ detail.acity }}</td>
              <td class="text-center">
                {{ detail.ddate }}
                <span class="d-none d-md-inline"
                  >{{ detail.dtime }} - {{ detail.atime }}</span
                >
              </td>
              <td>{{ detail.trainNo }}</td>
              <td>{{ detail.seatClass }}</td>
              <td class="d-none d-md-table-cell">{{ detail.price }}</td>
              <td class="d-none d-md-table-cell">{{ detail.cost }}</td>
            </tr>
          </tbody>
        </table>

        <div class="card-body bg-info text-white py-0">乘客信息</div>
        <template v-if="detail.passengers.length > 0">
          <table class="table table-striped table-hover table-sm">
            <thead>
              <tr>
                <th>姓名</th>
                <th>手机号</th>
                <th>车厢号</th>
                <th>座位号</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(psg, index) in detail.passengers">
                <td>
                  {{ psg.name }}
                </td>
                <td>{{ psg.mobile }}</td>
                <td>{{ psg.coachNo }}</td>
                <td>{{ psg.seatNo }}</td>
              </tr>
            </tbody>
          </table>
        </template>
        <template v-else>
          <table class="table table-striped table-hover table-sm">
            <tr>
              <td>姓名: {{ detail.passengerName }}</td>
              <td>人数: {{ detail.psgCount }}</td>
            </tr>
          </table>
        </template>

        <div class="card-body bg-info text-white py-0">金额信息</div>
        <table class="table table-striped table-hover table-sm">
          <thead>
            <tr>
              <th class="d-none d-md-table-cell">销售价</th>
              <th class="d-none d-md-table-cell">底价</th>
              <th>服务费</th>
              <th>总金额</th>
              <th>总成本</th>
              <th>利润</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="d-none d-md-table-cell">{{ detail.price }}</td>
              <td class="d-none d-md-table-cell">{{ detail.bottomPrice }}</td>
              <td>{{ detail.serviceCharge }}</td>
              <td>{{ detail.totalAmount }}</td>
              <td>{{ detail.totalCost }}</td>
              <td>{{ detail.profit }}</td>
            </tr>
          </tbody>
        </table>

        <div class="card-body py-0">
          <dl class="row">
            <dt class="col-4 text-end">预订人</dt>
            <dd class="col-8">{{ detail.operator }}</dd>
            <dt class="col-4 text-end">处理人</dt>
            <dd class="col-8">{{ detail.ticketer }}</dd>
            <dt class="col-4 text-end">收款方式</dt>
            <dd class="col-8">{{ getPayTypeDesc(detail.payType) }}</dd>
            <dt class="col-4 text-end">收款备注</dt>
            <dd class="col-8">{{ detail.payRemark }}</dd>
            <dt class="col-4 text-end">供应商</dt>
            <dd class="col-8">
              {{ detail.supplierName }}
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editSupplier()"
                v-if="detail.status === 0 || detail.status === 1"
              >
                修改
              </button>
            </dd>
            <dt class="col-4 text-end">支付方式</dt>
            <dd class="col-8">
              {{ detail.paymentMethodName }}
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editPayment()"
                v-if="detail.status === 0 || detail.status === 1"
              >
                修改
              </button>
            </dd>
            <dt class="col-4 text-end">收款状态</dt>
            <dd class="col-8">
              <span class="text-danger" v-if="detail.payStatus === 0"
                >未收款</span
              >
              <span class="text-info" v-else-if="detail.payStatus === 1"
                >已收款</span
              >
              <span class="text-primary" v-else-if="detail.payStatus === 2"
                >已销账</span
              >
            </dd>
            <dt class="col-4 text-end">备注</dt>
            <dd class="col-8">
              {{ detail.remark }}
              <template v-if="detail.status !== 2 && detail.status !== 4">
                <a
                  href="javascript:void(0)"
                  @click.stop="editRemark()"
                  class="ms-2"
                  title="修改备注"
                  >修改</a
                >
              </template>
            </dd>
            <dt class="col-4 text-end">外部订单号：</dt>
            <dd class="col-8">
              {{ detail.externalOrderNo }}
              <template v-if="detail.status !== 2 && detail.status !== 4">
                <a
                  href="javascript:void(0)"
                  @click.stop="editExternalOrderNo()"
                  class="ms-2"
                  title="修改外部订单号"
                  >修改</a
                >
              </template>
            </dd>
            <dt class="col-4 text-end">订单状态</dt>
            <dd class="col-8">{{ getStatusDesc(detail.status) }}</dd>
          </dl>
        </div>
      </div>
      <div class="card">
        <div class="card-body small">
          <div class="d-flex flex-row justify-content-around">
            <div
              class="d-flex flex-row justify-content-around"
              v-if="detail.status === 0"
            >
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editPrice()"
              >
                修改价格
              </button>
              <button
                class="btn btn-primary btn-sm ms-auto me-auto"
                @click.stop="processOrder()"
              >
                处理订单
              </button>
              <button
                class="btn btn-danger btn-sm ms-auto me-auto"
                @click.stop="cancelOrder()"
              >
                取消订单
              </button>
            </div>
            <div
              class="d-flex flex-row justify-content-around"
              v-else-if="detail.status === 1"
            >
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editPrice()"
              >
                修改价格
              </button>
              <button
                class="btn btn-primary btn-sm ms-auto me-auto"
                @click.stop="finishOrder()"
              >
                处理完毕
              </button>
              <button
                class="btn btn-danger btn-sm ms-auto me-auto"
                @click.stop="cancelOrder()"
              >
                取消订单
              </button>
            </div>
            <div
              class="d-flex flex-row justify-content-around"
              v-if="detail.status === 2 && detail.payStatus !== 2"
            >
              <button
                class="btn btn-danger btn-sm ms-2"
                @click.stop="rollbackStatus()"
                v-if="isAdmin"
              >
                回滚
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <a
            href="javascript:void(0)"
            class="float-end"
            @click.stop="viewHistory()"
            >查看历史记录</a
          >
        </div>
        <table class="table table-sm table-striped">
          <thead>
            <tr>
              <td>操作员</td>
              <td>内容</td>
              <td>时间</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="info in histories" :key="info.id">
              <td>{{ info.operator }}</td>
              <td>{{ info.content }}</td>
              <td>{{ info.createTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <hotel-update-price-modal
      ref="hotelUpdatePriceModal"
    ></hotel-update-price-modal>

    <modal-common-update ref="modalUpdatePsg">
      <span slot="title">修改</span>
      <span slot="label1">姓名</span>
      <span slot="label2">手机号</span>
      <span slot="label3">车厢号</span>
      <span slot="label4">座位号</span>
    </modal-common-update>
  </div>
</template>

<script>
import {
  APP_FLIGHT_PATH,
  SUPPLIER_TRAIN,
  ORDER_TRAIN,
} from "@/common/const.js";
import { showPayType, showPsgType } from "@/common/common.js";

import {
  searchTrainRefundOrder,
  showTrainOrderStatus,
  searchTrainRefundOrderHistory,
} from "@/api/train.js";
import {
  cancelTrainRefundOrder,
  processTrainRefundOrder,
  finishTrainRefundOrder,
} from "@/api/train.js";
import {
  updateTrainRefundOrderRemark,
  updateTrainRefundOrderPrice,
  updateTrainRefundOrderExternalOrderNo,
} from "@/api/train.js";

import { rollbackTrainRefundOrderStatus } from "@/api/admin.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import HotelUpdatePriceModal from "@/components/hotel-update-price-modal.vue";
import ModalCommonUpdate from "@/components/modal-common-update.vue";

export default {
  components: {
    MyModalPrompt,
    HotelUpdatePriceModal,
    ModalCommonUpdate,
  },
  data() {
    return {
      detail: null,
      id: 0,
      orderNo: "",

      modalTitle: "",
      modalNullable: false,

      histories: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    psgCount: function () {
      if (this.detail !== null) {
        this.priceInfo.ticketCount = this.detail.passengers.length;
        return this.priceInfo.ticketCount;
      } else {
        this.priceInfo.ticketCount = 1;
        return 1;
      }
    },
    supplierId: function () {
      return this.detail.supplierId;
    },
    payMethodId: function () {
      return this.detail.paymentMethodId;
    },
    orderType: function () {
      return ORDER_TRAIN;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      searchTrainRefundOrder(this.id, (val) => {
        this.detail = val;
      });
    },
    getStatusDesc: function (status) {
      return showTrainOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            return;
          }
          updateTrainRefundOrderRemark(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editExternalOrderNo: function () {
      this.modalTitle = "请输入新的外部订单号：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            return;
          }
          updateTrainRefundOrderExternalOrderNo(
            this.id,
            { externalOrderNo: remark },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    cancelOrder: function () {
      this.modalTitle = "请输入取消订单的理由：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            this.showErrMsg("请填写取消订单的理由");
            return;
          }
          cancelTrainRefundOrder(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    editPrice: function () {
      this.$refs.hotelUpdatePriceModal
        .modal(this.detail.price, this.detail.cost, this.detail.serviceCharge)
        .then((v) => this.doUpdatePrice(v))
        .catch(() => {});
    },
    doUpdatePrice: function (v) {
      const params = {
        price: v.price,
        cost: v.cost,
        serviceCharge: v.serviceCharge,
      };

      updateTrainRefundOrderPrice(this.id, params, (v) =>
        this.commonShowMessage(v)
      );
    },
    processOrder: function () {
      processTrainRefundOrder(this.id, (v) => this.commonShowMessage(v));
    },
    finishOrder: function () {
      this.modalTitle = "请输入完成备注：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          if (remark === "") {
            return;
          }
          finishTrainRefundOrder(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    viewHistory: function () {
      searchTrainRefundOrderHistory(this.id, (jsonResult) => {
        this.histories = jsonResult;
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("操作失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    rollbackStatus: function () {
      this.modalTitle = "确定将订单回滚吗？请输入理由：";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          rollbackTrainRefundOrderStatus(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
  },
};
</script>